<template>
  <div class="role-form">
    <el-form :model="formData" label-width="100px" size="medium">
      <el-form-item label="角色名称" required>
        <el-input v-model="formData.roleName" placeholder="请输入角色名称" />
      </el-form-item>
      
      <el-form-item label="权限字符" required>
        <el-input v-model="formData.permissionChar" placeholder="请输入权限字符" />
      </el-form-item>
      
      
      <el-form-item label="状态">
        <el-radio-group v-model="formData.status">
          <el-radio value="0">正常</el-radio>
          <el-radio value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="菜单权限">
        <div class="menu-permission-actions">
          <el-button size="small" @click="toggleExpand">
            {{ isExpanded ? '折叠' : '展开' }}
          </el-button>
          <el-button size="small" @click="toggleAll">
            {{ isAllSelected ? '全不选' : '全选' }}
          </el-button>
        </div>
        
        <el-tree
          ref="menuTree"
          :data="menuOptions"
          show-checkbox
          node-key="id"
          :default-expanded-keys="expandedKeys"
          :props="defaultProps"
          :check-strictly="!isParentChildLinked"
          @check="handleCheckChange"
        />
      </el-form-item>
      
      <el-form-item label="备注">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入内容"
          :rows="3"
        />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancelForm">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, computed, onMounted,defineEmits } from 'vue'
let emit = defineEmits(['ref-table'])
// 表单数据
const formData = ({
  roleName: '',
  permissionChar: '',
  status: '0', // 0-正常 1-停用
  menuIds: [],
  remark: ''
})

// 菜单树相关
const menuTree = ref(null)
const isExpanded = ref(false)
const isAllSelected = ref(false)
const isParentChildLinked = ref(true)

// 菜单选项 - 这里应该是从API获取的
const menuOptions = ref([
  {
    id: 1,
    label: '系统管理',
    children: [
      { id: 2, label: '用户管理' },
      { id: 3, label: '角色管理' },
      { id: 4, label: '菜单管理' },
      { id: 5, label: '部门管理' },
      { id: 6, label: '岗位管理' },
      { id: 7, label: '字典管理' },
      { id: 8, label: '参数设置' },
      { id: 9, label: '通知公告' },
      { id: 10, label: '日志管理' }
    ]
  }
])

const defaultProps = {
  children: 'children',
  label: 'label'
}

// 计算展开的keys
const expandedKeys = computed(() => {
  return isExpanded.value ? menuOptions.value.map(item => item.id) : []
})

// 切换展开/折叠
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

// 切换全选/全不选
const toggleAll = () => {
  isAllSelected.value = !isAllSelected.value
  if (isAllSelected.value) {
    const allKeys = getAllMenuKeys(menuOptions.value)
    menuTree.value.setCheckedKeys(allKeys)
  } else {
    menuTree.value.setCheckedKeys([])
  }
}

// 获取所有菜单key
const getAllMenuKeys = (menus) => {
  let keys = []
  menus.forEach(menu => {
    keys.push(menu.id)
    if (menu.children && menu.children.length > 0) {
      keys = keys.concat(getAllMenuKeys(menu.children))
    }
  })
  return keys
}

// 处理复选框选中变化
const handleCheckChange = (data, checkedNodes) => {
  form.menuIds = menuTree.value.getCheckedKeys()
}

// 提交表单
const submitForm = () => {
  console.log('提交表单:', form)
  // 这里应该调用API提交数据
  // 提交成功后可以跳转或关闭对话框等
}

// 取消表单
const cancelForm = () => {
    // 关闭对话框
     emit('ref-table')
}

// 初始化时可以选择默认选中的菜单
onMounted(() => {
  // 示例：默认选中某些菜单
  // menuTree.value.setCheckedKeys([2, 3, 4, 12, 13])
})
</script>

<style scoped>
.role-form {
  padding: 20px;
}

.menu-permission-actions {
  margin-bottom: 10px;
}

.el-tree {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 5px;
}
/* 树节点样式 */
.el-tree-node__content { 
    /* 放到多选框下面 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    height: 32px;
}
</style>